<!--
  description: readonly
  @author: GuoSiYue
  date: 2021-11-10
 -->

<template>
    <div>
        <h2>{{state.name}}</h2>
        <h2>{{state.age}}</h2>
        <home :state="Readonly"/>
    </div>
</template>

<script>
    import { reactive, readonly, ref } from 'vue'
    import Home from "./Home";
    export default {
        name: "readonly",
        components: {Home},
        setup() {
        //    readonly通常会传入三个类型的数据
        //    1.传入一个普通的对象
        //     const info = {
        //         name: 'gsy',
        //         age: 22
        //     }
        //     const state1 = readonly(info)
        //     console.log(info);

        //    2.传入reactive对象
            const state = reactive({
                name: 'gsy',
                age: 22
            })
            const Readonly = readonly(state)

        //    3.传入ref对象
        //     const refName = ref('gsy')
        //     const state3 = readonly(refName)

            return {
                state,
                Readonly
            }
        }
    }
</script>

<style scoped>

</style>